<template>
  <div id="scan-record">
    <c-title text="扫描记录"></c-title>
    <van-tabs v-model="order_type" color="#FE5E56" title-active-color="#FE5E56" line-width="20px" @click="onClickTab">
      <van-tab :title="item.name" :name="item.value" v-for="(item,index) in tabs" :key="index">
        <d-list :loading="loading" :finished="finished" @load="onLoad">
          <div class="detail-row" v-for="(citem,cindex) in recordsData" :key="cindex">
            <div class="date">{{citem.created_at}}</div>
            <div class="tracking-number">物流单号：{{citem.express_sn}}</div>
            <div class="love-value">{{citem.type?'奖励':'扣除'}}可用{{love_name}}：{{citem.deduct_love}}</div>
            <div class="img">
              <span>图片: </span>
              <img :src="citem.image_url" alt="" />
            </div>
          </div>
        </d-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import scan_record_controller from "./scan_record_controller";

export default scan_record_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#scan-record {
  .detail-row {
    margin: 0.6rem 0.6rem 0 0.6rem;
    background: white;
    padding: 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    border-radius: 0.4rem;
    .date {
      font-size: 0.85rem;
      font-weight: 500;
      color: #00001c;
      border-bottom: 0.1rem solid #f0f0f1;
      margin-bottom: 0.78rem;
      padding-bottom: 0.6rem;
    }
    .tracking-number {
      font-size: 0.8rem;
      font-weight: normal;
      color: #00001c;
      margin-bottom: 0.5rem;
    }
    .love-value {
      font-size: 0.8rem;
      font-weight: normal;
      color: #00001c;
      margin-bottom: 0.78rem;
    }
    .img {
      font-size: 0.8rem;
      font-weight: normal;
      color: #00001c;
      display: flex;
      img {
        margin: 0;
        width: 5.5rem;
        height: 5.5rem;
        background: #dfdfdf;
        border-radius: 0.4rem;
        margin-left: 0.4rem;
      }
    }
  }
}
</style>
